<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column prop="account" label="账号" width="100"></el-table-column>
      <el-table-column prop="nickName" label="昵称" width="160"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <span>{{ value2Name(userStatus, scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="email"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleAddOrUpdate(false,scope.row)" type="text">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--  添加或修改用户配置对话框-->
    <el-dialog :title="isAdd?'新增用户':'编辑用户'" :visible.sync="open" width="600px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户昵称" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入用户昵称"/>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号码"/>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-select v-model="form.status" placeholder="请选择"  style="width:480px">
            <el-option v-for="t in userStatus" :label="t.name" :value="t.value" :key="t.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {value2Name, parseTime} from '@/utils'
import store from "../../../store";

export default {
  data() {
    return {
      // 编辑的窗口
      open: false,
      isAdd: false,
      form: {},
      userStatus: store.listDictionary('userStatus'),
      // table数据
      tableData: []
    }
  },
  mounted() {
    this.listUser()
  },
  methods: {
    parseTime,
    value2Name,
    listUser(param) {
      var _this = this
      this.$api.listUser(param).then(res => {
        if (res.code === '00000') {
          _this.tableData = res.data
        } else {
          _this.$message(res.msg)
        }
      }).catch(e => {
        console.log('接口访问异常!')
      })
    },

    // 取消按钮
    cancel() {
      this.open = false
    },

    // 打开更新数据窗口
    handleAddOrUpdate(isAdd, row) {
      this.open = true
      this.isAdd = isAdd
      if (isAdd) {
        this.form = {}
      } else {
        this.form = row
      }
    },

    // 保存或者更新
    saveOrUpdate() {
      let _this = this
      let param = {
        nickName: _this.form.nickName,
        phone: _this.form.phone,
        email: _this.form.email,
        status: _this.form.status
      }
      if (this.isAdd) {
        this.$api.addUser(param).then(res => {
          if (res.code === '00000') {
            _this.$message('新增成功')
            this.open = false
          } else {
            _this.$message(res.msg)
          }
        }).catch(e => {
          console.log('接口访问异常!')
        })
      } else {
        param.id = _this.form.id
        this.$api.updateUser(param).then(res => {
          if (res.code === '00000') {
            _this.$message('修改成功')
            this.open = false
          } else {
            _this.$message(res.msg)
          }
        }).catch(e => {
          console.log('接口访问异常!')
        })
      }
    }
  }
}
</script>
